<!--
 * @Author: licongwei
 * @Date: 2022-03-07 16:49:39
 * @FileDescription: 应急监测执行情况
-->
<template>
  <com-box :title="title">
    <template v-slot>
      <div class="yjjc">
        <charts class="yjjc-charts" :params="params"></charts>
      </div>
    </template>
  </com-box>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
interface IState {
  title: string
  params: any
  getData: (adcode: string) => void
}
export default defineComponent({
  name: 'yjjczxqk',
  props: {
    adcode: {
      type: String,
      default: '650000'
    }
  },
  components: {
    comBox
  },
  setup(props) {
    const state: IState = reactive({
      title: '',
      params: {
        loading: true,
        map: {
          value: '数量'
        },
        options: {
          dataset: {
            dimensions: ['name', 'value'],
            source: []
          },
          xAxis: [
            {
              axisLabel: {
                show: true,
                color: '#94C5F6',
                fontSize: '12px'
              }
            }
          ],
          legend: {
            show: false
          },
          grid: {
            top: '20%',
            bottom: '12%'
          },
          series: [
            {
              type: 'bar',
              itemStyle: {
                color: [[['#0a73ea', '#00ffa2']]]
              },
              emphasis: {
                label: {
                  show: true,
                  position: 'top'
                }
              },
              barWidth: 15
            }
          ]
        }
      },
      getData: (adcode: string) => {
        state.params.loading = true
        httpRequest
          .get({ url: 'M1Yjjczxqk', params: { adcode: adcode } })
          .then((res) => {
            state.title = res.title
            state.params.options.dataset.source = res.data
            state.params.loading = false
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    state.getData(props.adcode)
    const { title, params } = toRefs(state)
    const refreshData = () => {
      state.getData(props.adcode)
    }
    watch(
      () => props.adcode,
      (val) => {
        state.getData(val)
      }
    )
    return {
      title,
      params,
      refreshData
    }
  }
})
</script>
<style lang="less" scoped>
.yjjc {
  width: 100%;
  height: 100%;
  .yjjc-charts {
    height: 170px !important;
  }
}
</style>
